<template>
	<view class="">
		<!-- <u-sticky bgColor="#fff">
		    <u-tabs :list="tablist" @change="clickTab" :current="current" :is-scroll="false"></u-tabs>
		</u-sticky> -->
		<view class="content">
			<!-- <view class="flex justify_end" style="padding: 0 24rpx;">
				<view class="flex align_center">
					<view class="" style="margin-right: 10rpx;">
						<u-icon name="list" color="rgba(0,0,0,.4)" size="28"></u-icon>
					</view>
					<view class="hui">筛选</view>
				</view>
			</view> -->
			<view class="listbox">
				<!-- 下拉刷新  暂时不需要 -->
				<!-- <mescroll-uni :fixed="false" ref="mescrollRef" @init="mescrollInit" @down="downCallback"
					@up="upCallback">
					
				</mescroll-uni> -->
				<view class="card shodow" v-for="(item,index) in listData" :key='index'>
					<view class="flex align_center marbot24">
						<view class="font28 bold ellipsis flex_1 width0" style="margin-right: 16rpx;">{{item.title}}</view>
						<view class="tip">{{item.appear_type}}</view>
					</view>
					<!-- 语音展示 -->
					<view class="yuyinBox shodow flex align_center marbot24" style="width: 60%;" @click.stop="handleYuyinPaly(item,index)" v-if="item.voice_file">
						<view class="" style="margin-right: 10rpx;">
							<image src="/static/image/yuyin_no.png" mode="" style="width: 28rpx;height: 28rpx;display: block;" v-if="!item.flag"></image>
							<image src="/static/image/yuyin_act.gif" mode="" style="width: 28rpx;height: 28rpx;display: block;" v-if="item.flag"></image>
						</view>
						<view class="">{{item.voice_time}} "</view>
					</view>
					<!-- 普通展示 -->
					<view class="heis ellipsis3 marbot24">{{item.content}}</view>
					
					<!-- 一键呼救 -->
					<!-- <view class="marbot24" >
						<view class="flex align_center marbot24">
							<view class="" style="margin-right: 100rpx;">姓名：张三</view>
							<view class="">联系电话：18888888888</view>
						</view>
						<view class="flex">
							<view class="">地点：</view>
							<view class="flex_1 width0 ellipsis2">这是很长很长的地址这是很长很长的地址这是很长很长的地址这是很长很长的地址这是很长很长的地址</view>
						</view>
					</view> -->
					<!-- 图片/视频展示 -->
					<!-- <scroll-view scroll-x="true" class="" style="white-space: nowrap;">
						<view class="" style="margin-right: 12rpx;width: 160rpx;height: 160rpx;display: inline-block;" v-for="(iten,ind) in 6" :key='iten'>
							<image src="https://img1.baidu.com/it/u=1889423232,2254084353&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" mode="aspectFill" style="width: 100%;height: 100%;display: block;" @click.stop="handleImg" v-if="ind % 2 == 0"></image>
							<video @click.stop="handleVideo" src="https://vd4.bdstatic.com/mda-qa74rmmc5ak8xfhp/sc/cae_h264/1704685254816092010/mda-qa74rmmc5ak8xfhp.mp4?v_from_s=hkapp-haokan-hnb&auth_key=1706094222-0-0-30d16fe3930c0d6fd412684e739d2b53&bcevod_channel=searchbox_feed&pd=1&cr=2&cd=0&pt=3&logid=0222257221&vid=7565897066127640105&klogid=0222257221&abtest=115667_1" :controls='false' :show-fullscreen-btn='false' :show-center-play-btn='false' :show-play-btn='false' v-else style="width: 100%;height: 100%;"></video>
						</view>
					</scroll-view> -->
					<view class="flex flex_wrap" v-if="item.material_files.length != 0">
						<view class="relative" style="width: calc((100% / 3) - 20rpx);margin: 10rpx;height: 0;padding-bottom: calc((100% / 3) - 20rpx);" v-for="(iten,ind) in item.material_files" :key='iten'>
							<image :src="iten.url" mode="aspectFill" style="width: 100%;height: 100%;display: block;position:  absolute;top:0;left: 0;border-radius: 8rpx;" @click.stop="handleImg(iten.url)" v-if="iten.type == 'img'"></image>
							<video @click.stop="handleVideo(iten.url)" :src="iten.url" :controls='false' :show-fullscreen-btn='false' :show-center-play-btn='false' :show-play-btn='false' v-if="iten.type == 'video'" style="width: 100%;height: 100%;position: absolute;"></video>
						</view>
					</view>
					<!-- 时间 -->
					<view class="martop24">{{item.createtime}}</view>
				</view>
			</view>
		</view>
		
		
		<videoMax :isShowVideo='isShowVideo' :videoUrl='videoUrl' @colse='handlecolse'></videoMax>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import videoMax from "@/components/video_max/video_max.vue";
	import {
		apiUserAppeal
	} from '@/api/backlog/backlog.js'
	import CONFIG from '@/config/config.js'
	import { dateFormats } from '@/utils/utils.js'
	export default {
		name: 'task_list',
		mixins: [MescrollMixin], // 使用mixin
		components: { videoMax },
		data () {
			return {
				// tablist:[
				// 	{name:'未受理',id:1},
				// 	{name:'办结中',id:2},
				// 	{name:'已办结',id:3},
				// ],
				// current:0,
				listData:[
					
				],
				
				page:1,
				pageSize:10,
				baseUrl:'',
				innerAudioContext:null,
				palyIndex:-1,   // 选中的播放语音 
				clearTime:null,   //定时器
				isShowVideo:false,
				videoUrl:'',
			}
		},
		onLoad(e){
			this.innerAudioContext = uni.createInnerAudioContext();
			this.baseUrl = CONFIG.baseUrl
			this.apiUserAppeal()
			console.log(dateFormats)
		},
		methods: {
			apiUserAppeal(){
				apiUserAppeal(this.page,this.pageSize).then(res=>{
					console.log('提交列表：',res)
					let _data = res.data.list
					let imageRegex = /\.(jpg|jpeg|png|gif)$/i;
					let videoRegex = /(mp4|avi|mov)/i;
					_data.map((v,i)=>{
						let arr = []
						let url = ''
						let type = ''
						if(v.material_files.length != 0){
							let zongArr = v.material_files.split(',')
							zongArr.map((vv,ii)=>{
								url = this.baseUrl +  vv
								if(imageRegex.test(vv)){
									type = 'img'
								}
								if(videoRegex.test(vv)){
									type = 'video'
								}
								arr.push({url,type})
							})
						}
						
						v.material_files = arr
						v.createtime = dateFormats(v.createtime * 1000,'Y-m-d H:i')
						v.flag = false
					})
					this.listData = _data
				})
			},
			handleYuyinPaly(item,index){  // 语音播报
				let _this = this
				if(this.clearTime){
					clearTimeout(_this.clearTime)
				}
				if(index != _this.palyIndex && _this.palyIndex != -1){   // 说明有一个语音在播放   要先销毁那个语音然后再播放新的语音
					if(_this.innerAudioContext){
						// 先销毁   
						_this.innerAudioContext.pause();
						_this.innerAudioContext.destroy()
						_this.innerAudioContext = null
						// 再创建
						_this.innerAudioContext = uni.createInnerAudioContext();
						_this.innerAudioContext.autoplay = true;
						_this.innerAudioContext.src = item.music;
						_this.clearTime = setTimeout(()=>{
							_this.innerAudioContext.pause();
							_this.innerAudioContext.destroy()
							_this.innerAudioContext = null
							_this.listData[index].flag = false
							_this.palyIndex = -1
						},item.time * 1000)
					}else{
						_this.innerAudioContext = uni.createInnerAudioContext();
						_this.innerAudioContext.autoplay = true;
						_this.innerAudioContext.src = item.music;
						_this.clearTime = setTimeout(()=>{
							_this.innerAudioContext.pause();
							_this.innerAudioContext.destroy()
							_this.innerAudioContext = null
							_this.listData[index].flag = false
							_this.palyIndex = -1
						},item.time * 1000)
					}
					_this.listData[_this.palyIndex].flag = false
				}else{
					if(item.flag){   //关闭
						if(_this.innerAudioContext){
							_this.innerAudioContext.pause();
							_this.innerAudioContext.destroy()
							_this.innerAudioContext = null
						}
					}else{  //开启语音
						if(_this.innerAudioContext){
							_this.innerAudioContext.autoplay = true;
							_this.innerAudioContext.src = item.music;
							_this.clearTime = setTimeout(()=>{
								_this.innerAudioContext.pause();
								_this.innerAudioContext.destroy()
								_this.innerAudioContext = null
								_this.listData[index].flag = false
								_this.palyIndex = -1
							},item.time * 1000)
						}else{
							_this.innerAudioContext = uni.createInnerAudioContext();
							_this.innerAudioContext.autoplay = true;
							_this.innerAudioContext.src = item.music;
							
							_this.clearTime = setTimeout(()=>{
								_this.innerAudioContext.pause();
								_this.innerAudioContext.destroy()
								_this.innerAudioContext = null
								_this.listData[index].flag = false
								_this.palyIndex = -1
							},item.time * 1000)
						}
						
					}
				}
				
				this.listData[index].flag = !item.flag
				_this.palyIndex = index
			},
			clickTab(e){
				this.current = e
			},
			handleImg(url){  // 查看图片
				uni.previewImage({
					urls:[url],
				})
			},
			handlecolse(){
				this.isShowVideo = false
			},
			handleVideo(url){  // 查看图片
				this.isShowVideo = true
				this.videoUrl = url
			},
			downCallback() {
				// 第2种: 下拉刷新和上拉加载调同样的接口, 则不用第1种, 直接mescroll.resetUpScroll()即可
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			async upCallback(page) {
				// 此处可以继续请求其他接口
				// if(page.num == 1){
				// 	// 请求其他接口...
				// }
			
				// 如果希望先请求其他接口,再触发upCallback,可参考以下写法
				// if(!this.isInit){
				// 	try{
				// 		await this.getAppealCategory();
				// 		this.isInit = true;
				// 		this.mescroll.resetUpScroll() // 重新触发upCallback
				// 	}catch(e){
				// 		this.mescroll.endErr()
				// 	}
				// 	return // 此处return,先获取xx
				// }
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				try {
					let res = null;
					if (this.level == 2 && this.type == 3) {
						res = await apiUserAppealBh(pageNum, pageSize)
					} else {
						res = await apiUserAppeal(pageNum, pageSize);
					}
					 
					// 接口返回的当前页数据列表 (数组)
					let curPageData = res.data.list;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = res.data.totalPage;
					//设置列表数据
					if (page.num == 1) this.data = []; //如果是第一页需手动置空列表
					this.data = this.data.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					this.mescroll.endByPage(curPageLen, totalPage);
			
					// 如果数据较复杂,可等到渲染完成之后再隐藏下拉加载状态: 如
					// 建议使用setTimeout,因为this.$nextTick某些情况某些机型不触发
					setTimeout(() => {
						this.mescroll.endSuccess(curPageLen)
					}, 20)
				} catch (e) {
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 24rpx 0;
		.listbox{
			padding-bottom: 24rpx;
			.card{
				border-radius: 16rpx;
				background: #fff;
				padding: 24rpx;
				margin-bottom: 24rpx;
				.tip{
					padding: 2rpx 4rpx;
					border-radius: 8rpx;
					border: 1rpx solid #FF7D04;
					color: #FF7D04;
					font-size: 24rpx;
				}
				.yuyinBox{
					padding: 20rpx 24rpx;
					border-radius: 10rpx;
					background: #2979ff;
					color:#fff;
				}
			}
		}
	}
	.marbot24{
		margin-bottom: 24rpx;
	}
	.martop24{
		margin-top: 24rpx;
	}
</style>